<template>
	<view>
		<home ref="home" v-show="pageCur == 'home'"></home>
		<monitor v-if="pageCur == 'monitor'"></monitor>
		<decision v-if="pageCur == 'decision'" ref="decision"></decision>
		<industry v-if="pageCur == 'industry'"></industry>
		<me v-if="pageCur == 'me'"></me>

		<view class="box" v-show="tabbarShow">
			<view class="cu-bar tabbar bg-white shadow foot" :class="{ hZindex: pageCur == 'home' }">
				<view
					:class="{ 'action-large': item.value == 'home' }"
					class="action"
					@click="changeNav(item)"
					v-for="item in tabList"
					:key="item.value"
				>
					<view class="cuIcon-cu-image">
						<image v-if="pageCur == item.value" :src="item.selectedIconPath"></image>
						<image v-if="pageCur != item.value" :src="item.iconPath"></image>
					</view>
					<view :class="pageCur == item.value ? 'color_main' : 'text-gray'">{{ item.name }}</view>
				</view>
			</view>
		</view>

		<u-modal
			v-model="show"
			content="请先登录，点击确认跳转"
			show-cancel-button
			@confirm="confirm"
			@cancel="show = false"
		></u-modal>
	</view>
</template>

<script>
	import home from './home.vue' //首页
	import monitor from './monitor.vue' //监测预警
	import decision from './decision.vue' //决策
	import industry from './industry.vue' //通信
	import me from './me.vue' //我的
	import moment from 'moment'
	import loginApi from '@/api/user/auth.js'
	import indexApi from '@/api/index.js'
	export default {
		components: {
			home,
			monitor,
			decision,
			industry,
			me
		},
		data() {
			return {
				documentHeight: document.documentElement.clientHeight,
				tabbarShow: true,
				pageCur: 'home',
				tabList: [
					{
						name: '监测预警',
						value: 'monitor',
						iconPath: '../../static/tabBar/index.png',
						selectedIconPath: '../../static/tabBar/index_cur.png'
					},
					{
						name: '检查上报',
						value: 'decision',
						iconPath: '../../static/tabBar/shop.png',
						selectedIconPath: '../../static/tabBar/shop_cur.png'
					},
					{
						name: '天气',
						value: 'home',
						iconPath: '../../static/tabBar/home.png',
						selectedIconPath: '../../static/tabBar/home_cur.png'
					},
					{
						name: '即时通讯',
						value: 'industry',
						iconPath: '../../static/tabBar/order.png',
						selectedIconPath: '../../static/tabBar/order_cur.png'
					},
					{
						name: '我的',
						value: 'me',
						iconPath: '../../static/tabBar/me.png',
						selectedIconPath: '../../static/tabBar/me_cur.png'
					}
				],
				show: false
			}
		},
		// 分享小程序
		onShareAppMessage(res) {
			return {
				title: '分享小程序！',
				imageUrl: 'https://cdn.zhoukaiwen.com/qdpz_share.jpg'
			}
		},
		// onLoad(options) {
		// 	if(options&&options.options.index&&options.data){
		// 		this.pageCur=options.options.index
		// 		this.$refs.home.init()
		// 	}
		// 	console.info(`options:`, options)
		// },
		onShow() {
			const userInfo = uni.getStorageSync('userInfo')
			if (!userInfo) {
				uni.reLaunch({ url: '/pages/user/login' })
				return
			}
			this.checkOut()
			this.loginOnLine()
			// if (this.pageCur == 'home') {
			this.$refs.home.initEcList()
			// }
		},
		onLoad(option) {
			// wx.showShareMenu({
			//   withShareTicket: true,
			// });
			// if (option.type == "matting") {
			//   uni.navigateTo({
			//     url: "../main/matting",
			//   });
			//   return;
			// }
		},

		onShareTimeline() {
			return {
				title: '分享小程序！'
			}
		},

		methods: {
			changeNav(item) {
				if (item.value == 'decision') {
					const userInfo = uni.getStorageSync('userInfo')
					if (!userInfo) {
						this.show = true
					} else {
						this.pageCur = item.value
					}
					return
				}
				if (item.value == 'industry') {
					// uni.webView.redirectTo({
					// 	url: '/pages/conversationList/ConversationListPage'
					// })
					const userInfo = uni.getStorageSync('userInfo')
					const getUserInfoData = uni.getStorageSync('getUserInfoData')
					uni.webView.postMessage({
						data: {
							userInfo: userInfo,
							getUserInfoData: getUserInfoData
						}
					})
					return
				}
				this.pageCur = item.value
			},
			confirm() {
				uni.navigateTo({ url: '/pages/user/login?data=' + '/pages/index/tabbar' })
			},
			// 登录上报
			async loginOnLine() {
				const getUserInfoData = uni.getStorageSync('getUserInfoData')
				const latlon = await this.$getLocation() // uni.getStorageSync('latlon')
				this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1', {
					key: 'XENBZ-NF4RU-LMIVC-G7CWJ-ZMMIK-KOFVN',
					location: `${latlon.latitude},${latlon.longitude}`,
					output: 'jsonp'
				})
					.then((res) => {
						indexApi.updateOrAdd([
							{
								longitude: latlon.longitude,
								lastTime: moment().format('YYYY-MM-DD HH:mm:ss'),
								positionInfo: res.result.address,
								latitude: latlon.latitude,
								userId: getUserInfoData.id,
								userName: getUserInfoData.nickName
							}
						])
					})
					.catch((error) => {
						console.error(error)
						// uni.showModal({
						// 	content: '获取地址失败'
						// })
					})
			},
			// 检查token是否过期
			async checkOut() {
				try {
					if (!this.UserInfo) {
						return
					}
					let resp = await loginApi.checkToken(this.UserInfo.access_token)
				} catch (error) {
					uni.showModal({
						title: '提示',
						content: '登录过期,请重新登录',
						showCancel: false,
						success: () => {
							uni.removeStorageSync('userInfo')
							uni.removeStorageSync('getUserInfoData')
							uni.removeStorageSync('getDeptTreeData')
							uni.reLaunch({ url: '/pages/user/login' })
							uni.clearStorageSync()
							uni.webView.postMessage({
								data: {
									message: 'loginOut'
								}
							})
						}
					})
				}
			}
			// // 版本更新
			// async getVersionEv() {
			// 	let resp = await indexApi.getVersion({ t: new Date().getTime() })
			// 	uni.webView.postMessage({
			// 		data: {
			// 			message: 'update_version',
			// 			data: resp
			// 		}
			// 	})
			// }
		},
		mounted() {
			this.checkOut()

			// // 检查版本更新
			// this.getVersionEv()

			uni.$on('changeTabbar', (data) => {
				this.pageCur = data.pageCur
				if (data.pageCur == 'decision') {
					setTimeout(() => {
						uni.$emit('changeTabbarChild', data)
					}, 100)
				}
			})

			window.onresize = () => {
				return (() => {
					if (this.documentHeight > document.documentElement.clientHeight) {
						this.tabbarShow = false
					} else {
						this.tabbarShow = true
					}
				})()
			}
		},
		beforeDestroy() {
			uni.$off('changeTabbar')
		}
	}
</script>

<style lang="scss">
	.color_main {
		color: #000000;
		font-weight: 900;
	}
	.box {
		margin: 20upx 0;
	}
	.box view.cu-bar {
		margin-top: 20upx;
	}

	.logo_btn {
		width: 38 * 2rpx;
		height: 38 * 2rpx;
	}
	.cu-bar.tabbar .action.add-action {
		padding-top: 56rpx !important;
	}
	.action-large {
		position: relative;
		bottom: 20rpx;
		background: transparent !important;
		image {
			width: 100rpx !important;
			height: 100rpx !important;
		}
		> view:nth-child(2) {
			position: relative;
			bottom: 10rpx;
		}
	}
	.hZindex {
		z-index: 9999999 !important;
	}
</style>
